<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1、背景 | smartAgri</title>
    <meta name="description" content="智慧前端项目文档">
    <link rel="stylesheet" href="/test/assets/style.12fc84cd.css">
    <link rel="modulepreload" href="/test/assets/Home.0acee10a.js">
    <link rel="modulepreload" href="/test/assets/app.8d0a65ca.js">
    <link rel="modulepreload" href="/test/assets/project_erp3_scheme_basicUpload_basicUpload.md.4fead758.lean.js">
    <link rel="modulepreload" href="/test/assets/app.8d0a65ca.js">
    <meta name="author" content="smart-agri Team">
    <meta name="keywords" content="vitejs, vite, ant-design-vue, vue">
    <link rel="icon" type="image/svg+xml" href="/logo.svg">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="vue SmartAgri Admin docs">
    <link rel="icon" href="/zhny.ico">
    <meta name="twitter:title" content="1、背景 | smartAgri">
    <meta property="og:title" content="1、背景 | smartAgri">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-c86e40f0><div class="sidebar-button" data-v-c86e40f0><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/test/" aria-label="smartAgri, back to home" data-v-c86e40f0 data-v-dc837cb8><img class="logo" src="/test/logo.jpg" alt="Logo" data-v-dc837cb8> smartAgri</a><div class="flex-grow" data-v-c86e40f0></div><div class="nav" data-v-c86e40f0><nav class="nav-links" data-v-c86e40f0 data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>指南</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/guide/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>指南</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>项目文档汇总</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/finical/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>新财务2.0</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/erp3/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>ERP3.0重构</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/food-safety/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>食安平台</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/customer-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>客户下单APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/supplier-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>供应商APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/tally-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>麦小菜APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>方案合集</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/schemeCollection/scheme/schemeLibrary" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>方案合集</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>公共组件</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>介绍</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/vue3/button" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue3组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/vue3/button" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue2组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/uni-app/waterlist" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>uni-app组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>工具函数</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/comprehension/tools/toolsLibrary" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>工具库</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>问题汇总</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/component" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>组件问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/errorList/踩坑合集" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>CSS问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/mp/uniapp" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>小程序问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>规范</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/JavaScript" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>JavaScript规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/Vue" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/GitFenZhi" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>git分支建立和提交规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/Others" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>其他大厂前端代码规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>相关链接</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.tslang.cn/docs/home.html" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>TypeScript</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.antdv.com/docs/vue/introduce-cn" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Antd</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>element</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>MDN</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://vitejs.cn/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vite</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vue2</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://cn.vuejs.org/guide/introduction.html" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vue3</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>npm</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.bejson.com/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>在线JSON校验格式化工具</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav></div><div class="nav-icons" data-v-c86e40f0><div class="item" data-v-c86e40f0><button class="nav-btn" aria-label="Toggle Theme" data-v-c86e40f0><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display:none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><!----></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-3e48a26e><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>指南</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/guide/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>指南</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>项目文档汇总</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/finical/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>新财务2.0</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/erp3/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>ERP3.0重构</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/food-safety/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>食安平台</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/customer-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>客户下单APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/supplier-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>供应商APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/tally-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>麦小菜APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>方案合集</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/schemeCollection/scheme/schemeLibrary" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>方案合集</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>公共组件</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>介绍</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/vue3/button" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue3组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/vue3/button" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue2组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/uni-app/waterlist" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>uni-app组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>工具函数</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/comprehension/tools/toolsLibrary" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>工具库</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>问题汇总</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/component" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>组件问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/errorList/踩坑合集" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>CSS问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/mp/uniapp" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>小程序问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>规范</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/JavaScript" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>JavaScript规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/Vue" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/GitFenZhi" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>git分支建立和提交规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/Others" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>其他大厂前端代码规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>相关链接</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.tslang.cn/docs/home.html" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>TypeScript</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.antdv.com/docs/vue/introduce-cn" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Antd</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>element</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>MDN</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://vitejs.cn/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vite</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vue2</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://cn.vuejs.org/guide/introduction.html" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vue3</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>npm</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.bejson.com/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>在线JSON校验格式化工具</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e><!--[--><li class="sidebar-link"><p class="sidebar-link-item">新财务2.0</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/project/finical/introduction">项目介绍</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">方案实现</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/project/finical/scheme/dimensional">三维表格</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">问题记录</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/">某问题</a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">erp3.0重构版</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/project/erp3/introduction">项目介绍</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">方案实现</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/test/project/erp3/scheme/basicUpload/basicUpload">上传阿里云OSS</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#_1、背景">1、背景</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_2、技术">2、技术</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_1）jsclient-签名直传">1）JSClient 签名直传</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_2）server-签名后直传">2）Server 签名后直传</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_3、操作">3、操作</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_1）创建-bucket">1）创建 Bucket</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_2）设置跨域">2）设置跨域</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_3）获取-accesskey">3）获取 AccessKey</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_4、basicupload-组件">4、BasicUpload 组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#代码示例">代码示例</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#props">Props</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#events">Events</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#slots">Slots</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#代码解释">代码解释</a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">问题记录</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/"></a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">食安平台</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/project/food-safety/introduction">项目介绍</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/test/project/food-safety/demand-dynamics/details">需求动态</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/test/project/food-safety/other/details">问题记录</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">客户下单app</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/project/customer-app/introduction">项目介绍</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">方案实现</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/"></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">问题记录</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/"></a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">供应商app</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/project/supplier-app/introduction">项目介绍</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">方案实现</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/"></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">问题记录</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/"></a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">麦小菜app</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/project/tally-app/introduction">项目介绍</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">方案实现</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/"></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">问题记录</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/test/"></a><!----></li></ul></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-4c107763><div class="container" data-v-4c107763><!--[--><!--]--><div class="content" data-v-4c107763><div data-v-4c107763><h2 id="_1、背景"><a class="header-anchor" href="#_1、背景" aria-hidden="true">#</a> 1、背景</h2><p>​ Web 端上传数据至 OSS，不用经过应用服务器中转，速度将大大提升，同时也减少应用服务器的压力。这里主要介绍两种上传 OSS 的方式。</p><h2 id="_2、技术"><a class="header-anchor" href="#_2、技术" aria-hidden="true">#</a> 2、技术</h2><h2 id="_1）jsclient-签名直传"><a class="header-anchor" href="#_1）jsclient-签名直传" aria-hidden="true">#</a> 1）JSClient 签名直传</h2><p>​ 在客户端通过 JavaScript 代码完成签名，无需过多配置，即可实现直传，非常方便。但是客户端通过 JavaScript 把 AccesssKey ID 和 AccessKey Secret 写在代码里面有泄露的风险 。</p><blockquote><p>AccessKey Id 和 AccessKey Secret 是用于阿里云 OSS 访问身份验证。 OSS 通过使用 AccessKey Id 和 AccessKey Secret 对称加密的方法来验证某个请求的发送者身份。</p></blockquote><p><a href="https://help.aliyun.com/document_detail/31925.html" target="_blank" rel="noopener noreferrer">官方文档地址</a></p><h2 id="_2）server-签名后直传"><a class="header-anchor" href="#_2）server-签名后直传" aria-hidden="true">#</a> 2）Server 签名后直传</h2><p><img src="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/0747006361/p139016.png" alt="时序图"></p><p>所需要用到的参数</p><img src="/test/images/erp3/1667180846719.png"><p><a href="https://help.aliyun.com/document_detail/31926.html" target="_blank" rel="noopener noreferrer">官方文档地址</a></p><h2 id="_3、操作"><a class="header-anchor" href="#_3、操作" aria-hidden="true">#</a> 3、操作</h2><h2 id="_1）创建-bucket"><a class="header-anchor" href="#_1）创建-bucket" aria-hidden="true">#</a> 1）创建 Bucket</h2><blockquote><p>Bucket：存储空间，是存储<strong>对象</strong>的容器，所有存储对象都必须隶属于某个存储空间 。</p><p>对象： OSS 存储数据的基本单元，也被称为 OSS 的文件。</p></blockquote><ul><li><p><strong>登录</strong><a href="https://oss.console.aliyun.com/overview" target="_blank" rel="noopener noreferrer">OSS 管理控制台</a></p></li><li><p><strong>进入 Bucket 列表</strong></p></li></ul><img src="/test/images/erp3/1667116480376.png"><ul><li><strong>创建 Bucket</strong></li></ul><img src="/test/images/erp3/1667116532204.png"><h2 id="_2）设置跨域"><a class="header-anchor" href="#_2）设置跨域" aria-hidden="true">#</a> 2）设置跨域</h2><ul><li><strong>点击 Bucket 列表对应的 Bucket，选择跨域设置，创建规则</strong></li></ul><img src="/test/images/erp3/1667116806464.png"><h2 id="_3）获取-accesskey"><a class="header-anchor" href="#_3）获取-accesskey" aria-hidden="true">#</a> 3）获取 AccessKey</h2><img src="/test/images/erp3/1667119901873.png"><h2 id="_4、basicupload-组件"><a class="header-anchor" href="#_4、basicupload-组件" aria-hidden="true">#</a> 4、BasicUpload 组件</h2><blockquote><p>使用 ant-design 组件库中的 a-upload 组件进行封装，实现前端上传阿里云 OSS</p></blockquote><h2 id="代码示例"><a class="header-anchor" href="#代码示例" aria-hidden="true">#</a> 代码示例</h2><p><strong>1）上传文件需要经过父组件来控制</strong></p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicUpload</span>
    <span class="token attr-name">:okUpload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>okUpload<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fileList<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:fileType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>img<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:fileSize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name"><span class="token namespace">@update:</span>okUpload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>okUpload = $event<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@onOssFinish</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleOssFile<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">/&gt;</span></span>

  <span class="token comment">&lt;!-- ... --&gt;</span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>vxe-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSave<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>保存<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>vxe-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
     <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
     <span class="token comment">// 上传文件需要父组件控制上传</span>
     <span class="token keyword">const</span> okUpload <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token comment">// 文件列表</span>
  <span class="token keyword">const</span> fileList <span class="token operator">=</span> ref<span class="token operator">&lt;</span>UploadProps<span class="token punctuation">[</span><span class="token string">&#39;fileList&#39;</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

     <span class="token comment">// 上传阿里云回调</span>
     <span class="token keyword">function</span> <span class="token function">handleOssFile</span><span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  	<span class="token comment">// 上传成功file为带有url的文件列表</span>
         <span class="token comment">// 上传失败为null</span>
     <span class="token punctuation">}</span>

     <span class="token comment">//#region 保存</span>
     <span class="token keyword">function</span> <span class="token function-variable function">handleSave</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
         <span class="token comment">// 保存之前的逻辑（判断、校验）</span>
         <span class="token comment">//...</span>

         <span class="token comment">// 确定保存后开始启动阿里云上传</span>
         okUpload<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong>2）不需要控制直接上传到阿里云</strong></p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicUpload</span>
        <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fileList<span class="token punctuation">&quot;</span></span>
		<span class="token attr-name">:isUploadOss</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span>
 		<span class="token attr-name">@onOssFinish</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleOssFile<span class="token punctuation">&quot;</span></span>
	 <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="props"><a class="header-anchor" href="#props" aria-hidden="true">#</a> Props</h2><table><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>可选值</th><th>说明</th><th>版本</th></tr></thead><tbody><tr><td>value</td><td><code>UploadFile[]</code></td><td><code>string[]</code></td><td>[]</td><td></td><td>-</td></tr><tr><td>multiple</td><td><code>boolean</code></td><td>false</td><td>-</td><td>是否允许多文件上传</td><td></td></tr><tr><td>showList</td><td><code>boolean</code></td><td>true</td><td>-</td><td>是否显示文件列表</td><td></td></tr><tr><td>uploadBtnText</td><td><code>string</code></td><td>‘选择文件’</td><td>-</td><td>上传按钮文字</td><td></td></tr><tr><td>status</td><td><code>boolean</code></td><td>primary</td><td>-</td><td>上传按钮状态</td><td></td></tr><tr><td>fileType</td><td><code>string</code></td><td>excel</td><td>&#39;img&#39;|&#39;excel&#39;|&#39;all&#39;</td><td>上传文件类型</td><td></td></tr><tr><td>okUpload</td><td><code>boolean</code></td><td>false</td><td></td><td>上传文件需要父组件控制上传</td><td></td></tr><tr><td>isUploadOss</td><td><code>boolean</code></td><td>false</td><td>-</td><td>上传文件时直接上传阿里云</td><td></td></tr><tr><td>fileSize</td><td><code>number</code></td><td>2</td><td>-</td><td>上传文件大小</td><td></td></tr><tr><td>showUploadBtn</td><td><code>boolean</code></td><td>true</td><td>-</td><td>控制上传按钮显示</td><td></td></tr><tr><td>isDeleteFile</td><td><code>boolean</code></td><td>false</td><td>-</td><td>控制是否本地删除</td><td></td></tr></tbody></table><h2 id="events"><a class="header-anchor" href="#events" aria-hidden="true">#</a> Events</h2><table><thead><tr><th>上传组件事件</th><th>回调参数</th><th>返回值</th><th>说明</th><th>版本</th></tr></thead><tbody><tr><td>onOssFinish</td><td></td><td></td><td>上传成功或者失败回调</td><td></td></tr><tr><td>onRemoveFile</td><td></td><td></td><td>删除文件回调</td><td></td></tr><tr><td>onFileChange</td><td></td><td></td><td>上传本地回调</td><td></td></tr><tr><td>update:okUpload</td><td></td><td></td><td>控制上传标志的值</td><td></td></tr></tbody></table><h2 id="slots"><a class="header-anchor" href="#slots" aria-hidden="true">#</a> Slots</h2><table><thead><tr><th>名称</th><th>说明</th><th>版本</th></tr></thead><tbody><tr><td>appendFooter</td><td>上传组件底部的插槽</td><td></td></tr></tbody></table><h2 id="代码解释"><a class="header-anchor" href="#代码解释" aria-hidden="true">#</a> 代码解释</h2><ul><li>okUpload 属性</li></ul><p>组件监听<code>okUpload</code>属性变化为 true 之后调用上传阿里云函数，上传动作结束后调用<code>update:okUpload</code>告诉父组件把值置为 false</p><div class="language-jsx"><pre><code><span class="token function">watch</span><span class="token punctuation">(</span>
  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> props<span class="token punctuation">.</span>okUpload<span class="token punctuation">,</span>
  <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>data <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>props<span class="token punctuation">.</span>isUploadOss<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">handleOSSUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//...</span>

<span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;update:okUpload&#39;</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><p>value 属性</p><p><code>value</code>属性接受的值为<code>UploadFile[]</code>|<code>string[]</code>，前者直接赋值给文件列表，后者转化为文件列表类似的格式并且<code>uid</code>为<code>-1</code>表示父组件传过来的值而非上传在浏览器的值</p></li></ul><div class="language-jsx"><pre><code><span class="token function">watch</span><span class="token punctuation">(</span>
    <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> props<span class="token punctuation">.</span>value<span class="token punctuation">,</span>
    <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          fileList<span class="token punctuation">.</span>value <span class="token operator">=</span> data<span class="token punctuation">;</span>
          <span class="token keyword">return</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">const</span> arr<span class="token operator">:</span> UploadFile<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        data<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token punctuation">(</span>item <span class="token keyword">as</span> any<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&#39;string&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
              uid<span class="token operator">:</span> <span class="token string">&#39;-1&#39;</span><span class="token punctuation">,</span>
              name<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
              status<span class="token operator">:</span> <span class="token string">&#39;done&#39;</span><span class="token punctuation">,</span>
              url<span class="token operator">:</span> item <span class="token keyword">as</span> unknown <span class="token keyword">as</span> string<span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        fileList<span class="token punctuation">.</span>value <span class="token operator">=</span> arr<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      deep<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><strong>a-upload 组件</strong></li></ul><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-upload</span>
        <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$props<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:fileList</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fileList<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:showUploadList</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fileType === <span class="token punctuation">&#39;</span>img<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:list-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fileType === <span class="token punctuation">&#39;</span>img<span class="token punctuation">&#39;</span> ? <span class="token punctuation">&#39;</span>picture-card<span class="token punctuation">&#39;</span> : <span class="token punctuation">&#39;</span>text<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:beforeUpload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>beforeUpload<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:customRequest</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customRequest<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleChange<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">@remove</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleRemoveFile<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">@preview</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handlePreview<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><ul><li>上传文件改变时</li></ul><p>1）判断<code>多文件</code>上传</p><p>2）改变文件列表数组的<code>状态</code></p><div class="language-jsx"><pre><code><span class="token keyword">const</span> <span class="token function-variable function">handleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span>multiple<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    fileList<span class="token punctuation">.</span>value <span class="token operator">=</span> e<span class="token punctuation">.</span>fileList<span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    fileList<span class="token punctuation">.</span>value<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> e<span class="token punctuation">.</span>file<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">/** 多文件多次触发只执行最后一次 */</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>file<span class="token punctuation">.</span>uid <span class="token operator">===</span> e<span class="token punctuation">.</span>fileList<span class="token punctuation">[</span>e<span class="token punctuation">.</span>fileList<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>uid<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    finishMultipleUploadFlag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span>fileType <span class="token operator">===</span> <span class="token string">&#39;img&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      fileList<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        file<span class="token punctuation">.</span>status <span class="token operator">=</span> <span class="token string">&#39;done&#39;</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;onFileChange&#39;</span><span class="token punctuation">,</span> <span class="token function">unref</span><span class="token punctuation">(</span>fileList<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>customRequest<code>自定义</code>上传</li></ul><div class="language-jsx"><pre><code><span class="token keyword">const</span> <span class="token function-variable function">customRequest</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span>isUploadOss <span class="token operator">&amp;&amp;</span> finishMultipleUploadFlag<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">handleOSSUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    fileList<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      file<span class="token punctuation">.</span>status <span class="token operator">=</span> <span class="token string">&#39;done&#39;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>从后端拿<code>签名</code>并筛选<code>文件列表</code></li></ul><div class="language-jsx"><pre><code><span class="token keyword">const</span> <span class="token function-variable function">handleOSSUpload</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">1000</span><span class="token punctuation">;</span>
    <span class="token comment">// 拿本地的签名的过期时间与现在时间对比，过期或者不存在就请求签名</span>
    signature <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token constant">UPLOAD_SIGNATURE</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">&#39;0&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>signature <span class="token operator">||</span> <span class="token function">Number</span><span class="token punctuation">(</span>signature<span class="token punctuation">[</span><span class="token string">&#39;expire&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">&lt;</span> now<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getSignature</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        signature <span class="token operator">=</span> res<span class="token punctuation">.</span>result<span class="token punctuation">;</span>
        localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token constant">UPLOAD_SIGNATURE</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>result<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;onOssFinish&#39;</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;update:okUpload&#39;</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&#39;error&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
	<span class="token comment">// 排除非本地上传的文件</span>
    <span class="token keyword">const</span> newArr <span class="token operator">=</span> fileList<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
      <span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
        file<span class="token punctuation">.</span>uid <span class="token operator">!==</span> <span class="token string">&#39;-1&#39;</span> <span class="token operator">&amp;&amp;</span>
        file<span class="token punctuation">.</span>uid <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">&amp;&amp;</span>
        file<span class="token punctuation">.</span>name <span class="token operator">&amp;&amp;</span>
        <span class="token punctuation">(</span><span class="token operator">!</span>file<span class="token punctuation">.</span>url <span class="token operator">||</span> file<span class="token punctuation">.</span>url<span class="token operator">!</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>signature<span class="token punctuation">[</span><span class="token string">&#39;host&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>newArr<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;onOssFinish&#39;</span><span class="token punctuation">,</span> fileList<span class="token punctuation">.</span>value<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token function">unref</span><span class="token punctuation">(</span>fileList<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;update:okUpload&#39;</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    newArr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">handleFile</span><span class="token punctuation">(</span>signature<span class="token punctuation">,</span> file<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><p>处理文件上传</p><ul><li><p>处理上传阿里云参数</p><div class="language-jsx"><pre><code><span class="token comment">/**
 * 格式化oss上传参数
 * @param params oss签名参数
 * @param file 上传文件
 */</span>
<span class="token keyword">function</span> <span class="token function">handleParamsFormat</span><span class="token punctuation">(</span><span class="token parameter">params<span class="token punctuation">,</span> file</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> suffix <span class="token operator">=</span> <span class="token function">getSuffix</span><span class="token punctuation">(</span>file<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> keyValue <span class="token operator">=</span> <span class="token function">randomString</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> suffix<span class="token punctuation">;</span>
  <span class="token comment">//注意formData里append添加的键的大小写</span>
  <span class="token keyword">const</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span> file<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 文件名称</span>
  formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;key&#39;</span><span class="token punctuation">,</span> params<span class="token punctuation">.</span>dir <span class="token operator">+</span> <span class="token string">&#39;/&#39;</span> <span class="token operator">+</span> keyValue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 存储在oss的文件路径</span>
  formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;dir&#39;</span><span class="token punctuation">,</span> params<span class="token punctuation">.</span>dir<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 存储在oss的目录</span>
  formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;OSSAccessKeyId&#39;</span><span class="token punctuation">,</span> params<span class="token punctuation">.</span>accessid<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// //accessKeyId</span>
  formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;policy&#39;</span><span class="token punctuation">,</span> params<span class="token punctuation">.</span>policy<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// policy</span>
  formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;signature&#39;</span><span class="token punctuation">,</span> params<span class="token punctuation">.</span>signature<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//签名</span>
  formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;success_action_status&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;200&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//不设置会报204错误</span>
  <span class="token comment">// formData.append(&#39;callback&#39;, params.callback);</span>

  formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;file&#39;</span><span class="token punctuation">,</span> file<span class="token punctuation">.</span>originFileObj<span class="token punctuation">,</span> file<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span> formData<span class="token punctuation">,</span> keyValue <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p>保存地址并开启上传</p></li></ul><div class="language-jsx"><pre><code>    <span class="token keyword">const</span> <span class="token punctuation">{</span> formData<span class="token punctuation">,</span> keyValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">handleParamsFormat</span><span class="token punctuation">(</span>param<span class="token punctuation">,</span> file<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token comment">//保存地址</span>
    <span class="token keyword">const</span> ossUrl <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>param<span class="token punctuation">.</span>host<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>param<span class="token punctuation">.</span>dir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyValue<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">await</span> <span class="token function">uploadOss</span><span class="token punctuation">(</span>param<span class="token punctuation">,</span> formData<span class="token punctuation">)</span><span class="token punctuation">;</span>
      fileList<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>uid <span class="token operator">===</span> file<span class="token punctuation">.</span>uid<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          item<span class="token punctuation">.</span>url <span class="token operator">=</span> ossUrl<span class="token punctuation">;</span>
          item<span class="token punctuation">.</span>status <span class="token operator">=</span> <span class="token string">&#39;done&#39;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 保证最后一个文件上传完成后再调用上传成功回调</span>
      <span class="token keyword">const</span> lastFile <span class="token operator">=</span> fileList<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>
        <span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> file<span class="token punctuation">.</span>url <span class="token operator">&amp;&amp;</span> file<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>param<span class="token punctuation">.</span>host<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>finishMultipleUploadFlag <span class="token operator">||</span> props<span class="token punctuation">.</span>okUpload<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> lastFile<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span>isUploadOss<span class="token punctuation">)</span> message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;component.upload.uploadSuccess&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;onOssFinish&#39;</span><span class="token punctuation">,</span> <span class="token function">unref</span><span class="token punctuation">(</span>fileList<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;update:okUpload&#39;</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        finishMultipleUploadFlag <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
</code></pre></div></li></ul></div></div><footer class="page-footer" data-v-4c107763 data-v-ddc19c16><div class="edit" data-v-ddc19c16><div class="edit-link" data-v-ddc19c16 data-v-5c10c4bc><!----></div></div><div class="updated" data-v-ddc19c16><!----></div></footer><div class="next-and-prev-link" data-v-4c107763 data-v-0002a634><div class="container" data-v-0002a634><div class="prev" data-v-0002a634><a class="link" href="/test/project/erp3/introduction" data-v-0002a634><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-0002a634><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-0002a634>项目介绍</span></a></div><div class="next" data-v-0002a634><a class="link" href="/test/project/food-safety/introduction" data-v-0002a634><span class="text" data-v-0002a634>项目介绍</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-0002a634><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"4e115ee3\",\"readme.md\":\"29234daa\",\"components_introduction.md\":\"44282a5e\",\"error_component.md\":\"fb89350e\",\"guide_introduction.md\":\"1dc92eff\",\"specification_gitfenzhi.md\":\"95918a05\",\"specification_javascript.md\":\"eabf491e\",\"specification_others.md\":\"c6e73694\",\"specification_vue.md\":\"ec62d92c\",\"components_uni-app_waterlist.md\":\"19ee5089\",\"components_vue3_button.md\":\"0794f010\",\"components_vue3_layout.md\":\"408bfad0\",\"comprehension_datas_number.md\":\"b616f9c2\",\"comprehension_datas_string.md\":\"f2247365\",\"comprehension_tools_toolslibrary.md\":\"8b9638a4\",\"error_errorlist_踩坑合集.md\":\"8a36011b\",\"error_mp_uniapp.md\":\"e38481a1\",\"project_customer-app_introduction.md\":\"bfeabf6e\",\"project_erp3_introduction.md\":\"4d6d2c14\",\"project_finical_introduction.md\":\"51ef0fa6\",\"project_food-safety_introduction.md\":\"320e7cd1\",\"project_supplier-app_introduction.md\":\"78907d59\",\"project_tally-app_introduction.md\":\"a25b274f\",\"schemecollection_scheme_schemelibrary.md\":\"964e9557\",\"project_finical_scheme_dimensional.md\":\"f62a7e4b\",\"project_food-safety_demand-dynamics_details.md\":\"8efde325\",\"project_food-safety_other_details.md\":\"4c1a00ef\",\"project_erp3_scheme_basicupload_basicupload.md\":\"4fead758\"}")</script>
    <script type="module" async src="/test/assets/app.8d0a65ca.js"></script>
  </body>
</html>